<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tr09" uri="http://www.trkj.com/logs"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品详情界面</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/web1.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
 $(function(){
	 $(".clr").click(function(){
			$(".clr").css("backgroundColor","white");
			$(this).css("backgroundColor","red");
			$("#color-value").attr("v", $(this).html());
		});
 });
 </script>
<script>
$(function(){
	$(".size").click(function(){
		$(".size").css("backgroundColor","white");
		$(this).css("backgroundColor","red");
		$("#size-value").attr("v", $(this).html());
	});
});
</script>
<style>
/*商品详情信息*/
.AreaL {
	width: 200px;
	border: 1px solid #e6e6e6;
	margin-left: 28px;
}

#right_div {
	height:100px;
	width: 65%;
	margin-top: 15px;
	margin-left: 51px;
}

#content_left {
	border: 1px solid #e6e6e6;
	float: left;
	height: 220px;
	width: 220px;
	margin-left: 30px;
}

#content_right {
	border: 1px solid #e6e6e6;
	margin-buttom: 100px;
	margin-left: 310px;
	width: 73%;
	height:415px;
}

#buy-a {
	background: #ff6699;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	border: none;
	width: 140px;
	color: white;
    margin-left:10px;
}

.menudiv{

}

.menudiv font {
	font-size: 14px;
	margin-left: 5px;
}

.menudiv ul {
	margin-left: 10px;
	float:left;
}

.menudiv1 font {
	font-size: 14px;
	margin-left:20px;
	float: left;
    margin-top:40px;
}

#ul li{
border:1px solid black;
cursor:pointer;
width:33px;
height:20px;
text-align:center;
margin-top:20px
}

#color li{
border:1px solid black;
cursor:pointer;
width:33px;
height:20px;
text-align:center;
margin-left:0px;
}
</style>
</head>
<body style="min-width: 980px;">
	<div id="main_top">
		<jsp:include page="headarea.jsp"></jsp:include>
	</div>
	<div class="header_wrape">
		<div class="navwrape">
			<div id="nave">
				<div class="navbare clearfix">
					<a class="currente" href="menu_listservlet">首页</a> <a
						href="Close_List">衣服</a> <a href="Shose_List">鞋靴</a> <a
						href="Pant_List">裤子</a>
				</div>
			</div>
		</div>
	</div>
	<div class="block box">
		<div class="blank"></div>
		<div id="ur_here">
			当前位置: <a href="menu_listservlet">首页</a>
			<code>&gt;</code>
			商品详情
		</div>
	</div>
	<div style="height:50px;">
		<div class="main_middle_right" >
			<div id="right_div">
					<c:forEach items="${list }" var="list">
						<div id="content_left">
							<ul id="one">
								<li><img src="${list.uiImage }" title="图片" /></li>
							</ul>
						</div>
						<div id="content_right" >
							<div style="background: #f5f5f5; margin-left: 0px; width: 100%">商品详情信息</div>
							<div style="margin-right: 320px; margin-top: 0px;">
								<ul style="margin-top: 5px; height: 100px;">
									<li style="font-size: 14px; width: 400%; margin-left: 10px;">商品名称：&nbsp;${list. cName}</li>
									<li style="font-size: 14px; margin-left: 10px; width: 160%">商品库存：&nbsp;${list. dStock}</li>
									<li style="font-size: 14px; margin-left: 10px; width: 160%">商品销量：&nbsp;${list. dSales}</li>
									<li style="font-size: 14px; margin-left: 10px; width: 160%">商品重量：&nbsp;${list. dDescribe}</li>
								</ul>
							</div>
							<div style="border: 1px dashed #e6e6e6; margin-top: -15px;"></div>
							<div style="margin-top: 5px;">
								<ul>
									<li style="font-size: 14px; margin-left: 10px;">商品售价:&nbsp;<strong
										style="color: #ff6699">${list. dPrice}</strong></li>
									<li style="font-size: 14px; margin-left: 10px;">剩余时间:5282天15小时34分钟59秒</li>
									<li style="font-size: 14px; margin-left: 10px;">注册用户:<strong
										style="color: #ff6699">￥88</strong> vip：<strong
										style="color: #ff6699">￥6662元</strong>&nbsp;&nbsp;&nbsp;<a href="ScChaxun?cId="${list.cId}">收藏</a>
									</li>
									<li style="font-size: 14px; margin-left: 10px;">购买此商品可使用：7000
										积分</li>
								</ul>
							</div>
							<div style="border: 1px dashed #e6e6e6; margin-top: 0px;"></div>
							<div class="menudiv">
								<div style="float: left; margin-top:5px; margin-left:10px;">
									<font id="color-value"> 颜色:</font>
								</div>
								<br/>
								<c:forEach items="${list1 }" var="list1">
									<ul  style="margin-left:2px;"  id="color">
										<li class="clr" style="color: #ff6699; font-size: 14px; margin-top: 5px;" id="li">${list1.coName }</li>
									</ul>
								</c:forEach>
								<br />
								<div class="menudiv1">
									<font style="font-size:14px;" id="size-value"> 尺寸：</font>
								</div>
								<br/>
								<c:forEach items="${list2}" var="list2">
									<ul id="ul">
										<li class="size" style="color: #ff6699; font-size: 14px;">${list2.sName }</li>
									</ul>
								</c:forEach>
							</div>
							<br/>
							<div style="border: 1px dashed #e6e6e6; margin-top:50px;"></div>
							<div style="margin-top:10px;height:78px;">
								<font style="font-size: 14px; margin-left:10px;">商品数量：</font> <input
									type="text" value="1" class="text" size="2px">件 <font
									style="font-size: 14px;">商品总价 ：</font> <strong
									style="color: #ff6699; font-size: 14px;">${list. dPrice}</strong>
								<br />
							<br />
								<a href="javascript:void(0)"  id="buy-a"  onclick="tosubmit(${list.cId})" type="submit" >￥加入购物</a>	
								<script type="text/javascript">
									function tosubmit(cid){
											var form = document.querySelector('form');
											var color=$('#color-value').attr('v');
											var size=$('#size-value').attr('v');
											location.href="product?cId="+cid+"&color="+color+"&size="+size;
									}
								</script>
							</div>
						</div>
					</c:forEach>
			</div>
		</div>
	</div>
	<div style="border: 1px dashed #e6e6e6; margin-top: 370px;"></div>
	<div class="blank5"></div>
	<div id="end_div" style="margin-top:5px;">
		<jsp:include page="end.jsp"></jsp:include>
	</div>
</body>
</html>